<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="icon" href="" type="img/x-ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小广告 大宣传</title>
<style type="text/css">
html{
	z-index: 1000;
}
body{
	margin: 0 0;
    width:100%;
    height:100%;
    overflow-y:scroll;
}
.xgg_container{
	width:100%;
	height:100%;
}
.xgg_header_container{
	width:100%;
	height:60px;
	position: fixed;
	left:0px;
	top:0px;
	background: #fff;
}
.header_container{
	width:100%;
	height:60px;
	border-bottom: 1px solid #eee;
}
.xgg_header{
	width:1160px;
	height:60px;
	margin: 0 auto;
	
}
.xgg_logo{
	width:100px;
	height:60px;
	float: left;
}
.xgg_area{
	width:115px;
	height:60px;
	float: left;
	text-align: center;
	line-height: 70px;
	font-size: 14px;
}
.xgg_search{
	width:500px;
	height:60px;
	float: left;
	
}
.logo{
	width:30px;
	height:30px;
	margin: 15px 0;
	border-radius:5px;
	float: left;
}
.xiaoguanggao{
	width:60px;
	height:30px;
	line-height: 30px;
	margin: 15px 5px;
	float: left;
	font-weight: 900;
}
.search_keyword_container{
	width:400px;
	height:40px;
	margin: 10px 0;
	float:left;

}
.search_keyword{
	box-sizing: border-box;
	font-size:1em;
	height:40px;
	border:1px solid #1296db;
	color:#6a6f77;
	-web-kit-appearance:none;
	-moz-appearance: none;
	display:block;
	outline:0;
	padding:0 10px;
	text-decoration:none;
	width:100%;
}
.search{
	width:80px;
	height:40px;
	background: #1296db;
	float:left;
	text-align:center;
	line-height:40px;
	margin: 10px 0;
	color: #ffffff;
	font-family: 微软雅黑;
}
.xgg_other{
	width:80px;
	height:40px;
	margin:10px 0;
	font-size:12px;
	float:right;
	line-height: 40px;
	text-align: center;
}
.holder_line{
	width:1px;
	height:14px;
	margin:23px 0;
	background: #ccc;
	float:right;
}
.xgg_body{
	width:210px;
	height:600px;
	position:fixed;
	left:0;
	top:60px;
}
.xgg_navgation_container{
	margin-top:10px;
	width:110px;
	height:610px;
	position:fixed;
}
.xgg_navgation{
	margin-top:10px;	
	display: inline-block;
	width:210px;
	height:600px;
}

ul{
    list-style-type:none;
    margin:0px;padding:0px;
}
li{
	cursor: default ;
}
.xgg_firsttype{
	width:100px;
	height:600px;
	float:left;
	overflow:hidden;
	margin-right: 5px;
}
.xgg_secondtype{
	width:0px;
	height:600px;
	float:left;
	overflow:hidden;
	background: #eee;
}
.firsttype,.secondtype{
	line-height: 40px;
	width:100px;
	height:40px;
	border-radius:5px;
	text-align: center;
	font-size: 14px;
}
.first_selected{
	background: #1296db;
	color:#ffffff;
}
.second_selected{
	background: #1296db;
	color:#ffffff;
}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 

.xgg_content{
	width:100%;
	height:100%;
	display: inline-block;
}
.xgg_ad_container{
	width:1160px;
	height:100%;
	margin:0 auto;
}
.xgg_ad_ul{
	margin-left:115px;
	margin-top: 60px;
}
.xgg_ad_ul_margin_con{
	margin-left: 215px;
}
.xgg_content_li{
	width:940px;
	padding-bottom:10px;
	border-bottom: 1px solid #eee;
	padding-top:10px;
}

.ad{
	width:940px;
	height:100%;
}

.ad_img_container{
	display: inline-block;
}
.ad_img{
	width:100px;
	height:100px;
}
.ad_content_container{
	width:820px;
	margin-left:10px;
	display: inline-block;
}
.ad_title{
	height:30px;
	line-height:30px;
	font-size: 20px;
	font-weight:900; 
}
.ad_content{
	padding-top:4px;
	height:52px;
	padding-bottom:4px;
	line-height:26px;
	overflow:hidden;
}
.ad_auther{
	height:20px;
	font-size: 14px;
	line-height:20px;
	color: #888888;
}
.ad_auther_time,.ad_auther_clicks{
	margin-left: 10px;
}

.firsttype_hover_more{
	width:300px;
	position: fixed;
	top:60px;
	left:100px;
	z-index: 2000;
	background: #fff;
}
.firsttype_hover_more_showhide{
	display:none;
}
.grayground{
	background: #eee;
}
.grayground2{
	background: #888;
}
.hovermore_content{
	width:98px;
	height:38px;
	text-align: center;
	line-height: 38px;
	float:left;
	font-size: 14px;
	border-radius:5px;
	background: #eee;
	margin: 1px 1px;
}
.ad_detail{

}
.hidden{
	display: none;
}
.addetail_img{
	height:300px;
	max-width:560px;
	
	margin-right: 10px;
	margin-top: 10px;
}
</style>
</head>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<body>
<div class="xgg_container">
<!-- 头部 -->
	<div class="xgg_header_container">
		<div class="header_container">
			<div class="xgg_header">
				<div class="xgg_logo">
					<img class="logo" src="${pageContext.request.contextPath}/upload/icon/xgg.png">
					<span class="xiaoguanggao">小广告</span>
				</div>
				<div class="xgg_area">区域</div>
				<div class="xgg_search">
					<div class="search_keyword_container">
						<input  class="search_keyword" type="text" id="search_keyword" />
					</div>
					<span class="search" onclick="fnsearch();">搜索</span>
				</div>
				<!-- <div class="xgg_other" >关于小广告</div>
				<div class="holder_line"></div> -->
				<div class="xgg_other">登录/注册</div>
				<div class="holder_line"></div>
				<div class="xgg_other">下载app</div>
			</div>
		</div>
	</div>
	<!-- 导航部 -->
	<div class="xgg_navgation_container hidden" id="xgg_navgation_container">
	<!-- <div class="xgg_navgation"> -->
	    
	    	<div class="xgg_firsttype">
	    	    <ul class="firsttype_menu" id="firsttype">
		    	     <!-- <li class="firsttype first_selected" id="0" onclick="changeItem(this);">公告</li> -->
	    	    </ul>
	    	</div>
	    	<div class="xgg_secondtype" id="xgg_secondtype">
	    	    <ul class="secondtype_menu" id="secondtype">
		    	    <!-- <li class="secondtype first_selected" id="s,0" onclick="changeItem(this);">公告</li>
		    	    <li class="firsttype">普工</li>
		    		<li class="firsttype">驾驶员</li>
		    		<li class="firsttype">保安</li>
		    		<li class="firsttype">环卫</li>
		    		<li class="firsttype">保洁</li>
		    		<li class="firsttype">会计</li>
		    		<li class="firsttype">电焊工</li>
		    		<li class="firsttype">钢筋工</li>
		    		<li class="firsttype">木工</li>
		    		<li class="firsttype">水电工</li>
		    		<li class="firsttype">钳工</li>
		    		<li class="firsttype">搬运工</li>
		    		<li class="firsttype">律师</li>
		    		<li class="firsttype">更多</li> -->
	    	    </ul>
	    	</div>
	   <!-- </div> --> 
	</div>
	<!-- 内容部 -->
    <div class="xgg_content" id="xgg_content" >
    	<div class="xgg_ad_container" id="xgg_ad_container">
    		<ul class="xgg_ad_ul" id="xgg_ad_ul">
    		<!--  
	    	     <li class="xgg_content_li clearfloat" >
	    			<div class="ad"  onclick="fnCheckAddetail(this);" >
	    				<div class="ad_img_container">
	    					<img class="ad_img" alt="" src="${pageContext.request.contextPath}/upload/icon/xgg.png"/>
	    				</div>
	    				<div class="ad_content_container" >
	    					<div class="ad_title">山地转让</div>
	    					<div class="ad_content" id="detail">30余亩山地，水电齐全有网，有老桃树林，风景优美，证件齐全，价格详谈，拒绝中介,哈慈就是就是不打算给大家伙就不会到就是就是经济将哈哈解决很多事交换机多少度交换机很多事。</div>
	    					<div class="ad_auther">
	    						<span class="ad_auther_nickname" >张三</span>
	    						<span class="ad_auther_time">5个小时前</span>
	    						<span class="ad_auther_clicks">浏览1此</span>
	    					</div>
	    				</div>
	    			</div>
	    			<div class="ad_detail hidden" onclick="fnHideAddetail(this);">
	    					 <div class="ad_detail_content_container">
		    					<div class="ad_title">山地转让</div>
		    					<div class="ad_detail_content">30余亩山地，水电齐全有网，有老桃树林，风景优美，证件齐全，价格详谈，拒绝中介,哈慈就是就是不打算给大家伙就不会到就是就是经济将哈哈解决很多事交换机多少度交换机很多事。</div>
		    			  </div>
		    			  <div class="ad_detail_img_container">
		    			  		<img class="addetail_img" alt="" src="${pageContext.request.contextPath}/upload/icon/xgg.png"/>
		    			  		<img class="addetail_img" alt="" src="${pageContext.request.contextPath}/upload/icon/xgg.png"/>
		    			  </div>
	    			</div>
	    		</li>
	    		-->
	    	</ul>
    	</div>
    </div>
    <!-- 脚部 -->
    <div class="xgg_footer" ></div>
</div>
<ul class="firsttype_hover_more firsttype_hover_more_showhide" id="firsttype_hover_more">
	<!-- <li class="hovermore_content" id="110" onclick="changeItem(this);">公告</li> -->
</ul>
<ul class="firsttype_hover_more firsttype_hover_more_showhide" id="secondtype_hover_more">
	<!-- <li class="hovermore_content" id="110" onclick="changeItem(this);">公告</li> -->
</ul>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/home.js"></script>
<script type="text/javascript">
	//广告类型
	var adTypeData;
	var xgg_navgation_container;
	$(function(){
		xgg_navgation_container=$("#xgg_navgation_container");
		fnGetFirstType();
		fnGetData();
		//监听滑动事件
        fnListenerScroll();
		fnfixedNavigation();
	});
	//选中某个主类
	function changeItem(one){
		if(one.id==type){
			return;
		}
		pageIndex=1;
		type=one.id;
		secondtype=0;
		xgg_ad_ul.empty();
		keyword='';
		fnGetData();
		$("#"+one.id).addClass("first_selected");
		removeOtherLiClass(one.id);
		//显示次类
		fnShowSecondType(one.id);
	}
	//显示次类
	function fnShowSecondType(firstTypeId){
		//alert(firstTypeId);
		var secondtype=$("#secondtype");
		var secondtype_hover_more=$("#secondtype_hover_more");
		secondtype.empty();
		secondtype_hover_more.empty();
		for(var i=0;i<adTypeData.data.length;i++){
			if(adTypeData.data[i].firsttype==firstTypeId){
				//alert(adTypeData.data[i].seconds[1].adname);
				var xgg_ad_ul=$("#xgg_ad_ul");
				var xgg_secondtype=$("#xgg_secondtype");
				if(adTypeData.data[i].seconds.length>0){
					xgg_ad_ul.addClass("xgg_ad_ul_margin_con");
					xgg_navgation_container.css("width","210px");
					xgg_secondtype.css("width","100px");
					var html='';
					var morehtml='';
					for(var j=0;j<adTypeData.data[i].seconds.length;j++){
						if(j<14){
							if(j==0){
								html+='<li class="secondtype second_selected" id="s_'+adTypeData.data[i].seconds[j].secondtype+'" onclick="changeSecondItem(this);">'+adTypeData.data[i].seconds[j].adname+'</li>';
							}else{
								html+='<li class="secondtype" id="s_'+adTypeData.data[i].seconds[j].secondtype+'" onclick="changeSecondItem(this);">'+adTypeData.data[i].seconds[j].adname+'</li>';
							}
						}
						if(j==14 && adTypeData.data[i].seconds.length>15){
							html+='<li class="firsttype" id="secondtype_more">更多</li>';
						}
						if(j>=14){
							morehtml+='<li class="hovermore_content" id="'+adTypeData.data[i].seconds[j].secondtype+'" onclick="fnSelectSecondHoverMore(this);">'+adTypeData.data[i].seconds[j].adname+'</li>';
						}
					}
					secondtype.append(html);
					secondtype_hover_more.append(morehtml);
				}else{
					xgg_ad_ul.removeClass("xgg_ad_ul_margin_con");
					xgg_navgation_container.css("width","110px");
					xgg_secondtype.css("width","0px");
				}
			}
		}
		
		$("#secondtype_more").hover(function(){
			$("#secondtype_more").addClass("grayground2");
			fnShowSecondTypeMore();
		},function(){
			$("#secondtype_more").removeClass("grayground2");
			fnHideSecondTypeMore();
		});
		$("#secondtype_hover_more").hover(function(){
			fnShowSecondTypehovermore();
		},function(){
			fnHideSecondTypehovermore();
		});
	}
	//获取广告类型
	function fnGetFirstType(){
		$.ajax({
			url:'${pageContext.request.contextPath}/adType/getFirstType.do',
			type:'GET',
			dataType:'json',
			success:function(result){
				if(result.status==1){
					adTypeData=result;
                    fnShowFirstType(result);
				}else{
				    alert("获取失败");
                }
			},
			error:function(result){
				alert('error:'+result.status);
			}
		});
	}
	//动态设置导航的属性
	function fnfixedNavigation(){
		 var xgg_navgation_container=$("#xgg_navgation_container");
		 var width=$(window).width();
		 var left=(width-1160)/2;
		 var top=60;
		 xgg_navgation_container.css("left",left+"px");
		 xgg_navgation_container.css("top",top+"px");
		 xgg_navgation_container.removeClass("hidden");
	}
	//查看广告详情
	function fnCheckAddetail(one){
		$.ajax({
			url:'${pageContext.request.contextPath}/ad/getAdById.do',
			type:'POST',
			data:{id:one.id},
			dataType:'json',
			success:function(result){
				if(result.status==1){
                    console.log(result.data.title);
                    $(one).addClass("hidden");
            		var addetail=$("#ad_"+one.id);
            		addetail.removeClass("hidden");
            		addetail.empty();
            		var html='';
            		html+='<div class="ad_detail_content_container">';
            		html+='<div class="ad_title">'+result.data.title+'</div>';
            		html+='<div class="ad_detail_content">'+result.data.content+'</div>';
            		html+=' </div>';
            		html+='<div class="ad_detail_img_container">';
            		if(result.data.photos){
            			var photos=result.data.photos.split(",");
                		for(var i=0;i<photos.length;i++){
                			html+='<img class="addetail_img" alt="" src="${pageContext.request.contextPath}/'+photos[i]+'"/>';
                		}
            		}
            		html+='</div>';
            		addetail.append(html);
				}else{
				    alert("获取失败");
                }
			},
			error:function(result){
				isloading=false;
				alert('error:'+result.status);
			}
		});
		//alert(one.id);
	}
	//隐藏广告详情
	function fnHideAddetail(one){
		$(one).addClass("hidden");
		var addetail=$("#"+one.id.split('_')[1]);
		addetail.removeClass("hidden");
	}
	//筛选广告的条件
	var pageIndex=1;
	var pageSize=50;
	var type=1;//默认为最新
	var secondtype=0;//默认为全部
	var provinceCode='-1';
	var cityCode='-1';
	var districtCode='-1';
	var townCode='-1';
	var keyword='';
	var method='';
	
	var isloading=false;
	var xgg_ad_ul;
	
	function fnGetData(){
		if(isloading){
			return;
		}
		isloading=true;
		$.ajax({
			url:'${pageContext.request.contextPath}/ad/getAds.do',
			type:'POST',
			data:{pageIndex:pageIndex,pageSize:pageSize,type:type,secondtype:secondtype,provinceCode:provinceCode,cityCode:cityCode,districtCode:districtCode,townCode:townCode,keyword:keyword,method:method},
			dataType:'json',
			success:function(result){
				isloading=false;
				if(result.status==1){
                    //alert(result.data[0].title);
                    fnShowAds(result);
				}else{
				    alert("获取失败");
                }
			},
			error:function(result){
				isloading=false;
				alert('error:'+result.status);
			}
		});
	}
	//监听滑动事件
	function fnListenerScroll(){
		$(window).scroll(function(){
			function getScrollTop(){   
			    var scrollTop=0;   
			    if(document.documentElement&&document.documentElement.scrollTop){   
			        scrollTop=document.documentElement.scrollTop;   
			    }else if(document.body){   
			        scrollTop=document.body.scrollTop;   
			    }   
			    return scrollTop;   
			}   
			//document.onscroll = function(){  
			//    console.log(getScrollTop())   
			//    console.log($(document).height());
			//}  
			//alert($(window).height());
			//alert(document.body.scrollTop);
			//如果文档的高度减去屏幕的高度小于1000就加载更多数据
			if($(document).height()-getScrollTop()<2000){
				//alert($(window).height()-document.documentElement.scrollTop);
				pageIndex++;
				fnGetData();
			}
		});
	}
	//展示广告
	function fnShowAds(adData){
		//alert('haha');
		xgg_ad_ul=$("#xgg_ad_ul");
		for(var i=0;i<adData.data.length;i++){
			var html='';
			html+='<li class="xgg_content_li clearfloat">';
			html+='<div class="ad" id="'+adData.data[i].ad_id+'" onclick="fnCheckAddetail(this);">';
			html+='	<div class="ad_img_container">';
			if(adData.data[i].photos){
				var firstPhoto=adData.data[i].photos.split(',')[0];
				//alert(firstPhoto);
				html+='	<img class="ad_img" alt="" src="${pageContext.request.contextPath}/'+firstPhoto+'"/>';
			}else{
				html+='	<img class="ad_img" alt="" src="${pageContext.request.contextPath}/upload/icon/xgg.png"/>';
			}
			html+='	</div>';
			html+='	<div class="ad_content_container">';
			html+='		<div class="ad_title">'+adData.data[i].title+'</div>';
			html+='		<div class="ad_content">'+adData.data[i].content+'</div>';
			html+='					<div class="ad_auther">';
			html+='						<span class="ad_auther_nickname">'+adData.data[i].nickname+'</span>';
			html+='						<span class="ad_auther_time">'+formatDate(adData.data[i].pull_time)+'</span>';
			html+='						<span class="ad_auther_clicks">浏览'+adData.data[i].clicks+'次</span>';
			html+='					</div>';
			html+='			</div>';
			html+='		</div>';
			html+=' <div class="ad_detail hidden" id="ad_'+adData.data[i].ad_id+'"  onclick="fnHideAddetail(this);">';
			html+=' </div>';
			html+='	</li>';
			xgg_ad_ul.append(html);
		}
	}
	//搜索
	function fnsearch(){
		keyword=$("#search_keyword").val();
		pageIndex=1;
		xgg_ad_ul.empty();
		fnGetData();
	}
</script>
</html>